前段時間，我已經有練習過如何呼叫 API 以及分析回應。

今天我要來學習的主題是 HTTP 標頭、快取機制和 CORS。這些在用 API 或寫前端網頁時非常常見，如果不理解的話，會很容易踩坑。

為什麼要學 HTTP 標頭、快取與 CORS？

了解資料交換的細節：

當我們用瀏覽器或程式跟網站或 API 溝通時，他們是用一種叫做 HTTP 的規則互相傳資料。學會 HTTP 標頭可以幫助我們知道瀏覽器或我們的程式和伺服器到底怎麼對話，這樣才能更清楚發生了什麼事。

提升速度和安全：

快取可以幫我們把常用的資料暫時存在自己那裡，這樣我們下次要用時，速度會快很多，也省了網路流量。

CORS（跨來源資源共享）是瀏覽器的一種安全機制，讓網頁只能從允許的網站拿資料，避免其他網站未經授權就讀取我們不想公開的內容。

學會處理 CORS 則能避免常見的錯誤。

基礎知識也很重要：

很多 API 的說明文件會提到這些名詞，如果我們不懂這些名詞，就很難照著文件正確調用 API，會因此卡住或者用錯。懂了這些，寫程式呼叫 API 才能更順利。

常見的 HTTP 標頭

Content-Type： 這告訴我們伺服器回傳的資料類型，例如是 JSON 格式（application/json）還是網頁（text/html）。

Accept： 這是我們的程式或瀏覽器告訴伺服器，我們希望取得的資料格式，例如 JSON。

Authorization： 用來帶入身份驗證資訊，像是 API 金鑰或 Token，讓服務知道我們有權限使用它。

Cache-Control： 告訴瀏覽器或快取伺服器要怎麼保存資料，例如是否要快取、快取多久，像 no-cache 表示不要快取，max-age=60 表示快取 60 秒。

ETag / Last-Modified： 用來幫助快取檢查資料有沒有更新，節省重新取得全部資料的流量。

Vary： 告訴快取系統，哪些標頭會影響回應，使得快取資料更加精準。

** Origin / Access-Control-Allow-*：** 這些標頭與 CORS（跨來源請求）有關，用來設定哪些網頁可以跨越不同網站安全地取得資料。

這些標頭可以讓瀏覽器和伺服器能更有效率和安全地交換資料。

HTTP 快取是怎麼運作的？

強制快取（Freshness）

伺服器會告訴瀏覽器或程式可以先將資料存在本地，並設定一段快取時間（例如多少秒或分鐘），這是透過 Cache-Control: max-age=秒數 這個標頭來控制的。在這段時間內，瀏覽器會直接使用本地的快取資料，不會再向伺服器發出請求，讓讀取速度變得更快。

例子：Cache-Control: max-age=60 表示一分鐘內不會再去問伺服器。

驗證式快取（Revalidation）

快取時間一到，瀏覽器會向伺服器確認資料是否有更新，這時會用到 ETag 或 Last-Modified 這兩個標頭。如果資料沒有改變，伺服器會回傳 304 Not Modified，表示瀏覽器可以繼續使用快取的資料，這樣就省下重新下載資料的時間和流量。

簡單小結論

強制快取是指在快取設定的時間內，瀏覽器不會再向伺服器請求資料，而是直接使用快取中的內容。驗證式快取則是在快取時間結束後，瀏覽器會先問伺服器資料是否有更新，根據回應決定是繼續使用快取還是下載新的資料。

什麼是 CORS？

CORS（Cross-Origin Resource Sharing，跨來源資源共享）是瀏覽器的安全規則，意思是前端的程式，像是網頁上的 JavaScript，只能讀取同一個來源的資料。

這裡的同一個來源指的是：

• 同一個網站網域（例如 www.example.com）

• 同一個通訊協定（http 或 https）

• 同一個埠口（port，例如 80 或 443）

這條規則目的是防止其他網站未經授權就讀取我們不想公開的內容。

CORS（跨來源資源共享）是一種機制，當我們想讓網頁讀取不同來源的資料時，必須經過伺服器允許。

伺服器會用一些特別的 HTTP 標頭來告訴瀏覽器：

• Access-Control-Allow-Origin: * 表示允許所有網域的網頁存取

• Access-Control-Allow-Origin: https://example.com 僅允許特定網域存取

預檢請求（Preflight OPTIONS） 是 CORS 的一部分，瀏覽器會先發送一個叫 OPTIONS 的請求問伺服器：「我可以用這個方法和這些資料跟你要嗎？」

什麼時候會發生預檢請求呢？

• 使用了非基本的 HTTP 方法，比如 PUT、DELETE，或特殊的 POST

• Content-Type 不是瀏覽器認為的簡單類型（像 application/json）

• 自己加的特殊標頭，比如 X-Token

• 請求中帶有 Cookie 或其他身份認證資訊

今日總結

今天學會了幾個常見的 HTTP 標頭，能讓瀏覽器與伺服器交換資料更有效率也更安全。同時，我也理解快取有兩種作法，第一種是強制快取，會在設定時間內直接使用本地快取、不向伺服器請求，而第二種驗證式快取，則在期限過後先向伺服器確認是否有更新再決定是否使用。最後我也明白了 CORS 與預檢請求是瀏覽器為了安全而設計的規則，只有在被允許時才允許跨來源取得資料，這不是 API 出錯，而是用來保護使用者與資源的機制。